<template>
    <view :class="'cell ' + (isTouchMoveTemp ? 'cell-active' : '') + ' ' + (disabled ? 'disabled' : '') + ' ' + (actived ? 'actived' : '') + 'cell2'">
        <view class="cell-body" :style="'transform: translateX(' + translateX + 'px);margin-left: -' + translateX + 'px; ' + transform">
            <view class="cell-touch" :style="txtStyle" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchE">
                <view class="cell-header" @tap="onBindTapHeader">
                    <view class="cell-left">
                        <view class="cell-icon">
							<template v-if="customPrefix==='false'">
								<image
									:src="icon" 
									lazy-load 
									class="cell-image" 
									:style="{backgroundColor: color,borderRadius:radius?'100%':'0',width:size+'rpx',height:size+'rpx'}" 
									v-if="icon"
								></image>
							</template>
							<template v-else>
								<uni-icons :custom-prefix="customPrefix" :type="icon" :size="size" :color="color" style="margin-left: 10rpx;" v-if="icon"></uni-icons>
							</template>
							<slot name="icon"></slot>
                        </view>
                        <view class="cell-headline">
                            <view class="cell-title" :style="{color: titleColor, fontSize: fontSize+'px'}">{{ title }}</view>
                            <slot name="title"></slot>
                            <view class="cell-sub-title">{{ subTitle }}</view>
                            <slot name="subTitle"></slot>
                        </view>
                    </view>
                    <view class="cell-right">
                        <text class="cell-tips" :style="'padding-right:' + (more ? '' : '20rpx')">{{ tips }}</text>
                        <slot name="tips" @tap.native.stop.prevent="onCatchTap"></slot>
                        <view v-if="more" @touchstart.native.stop.prevent="touchstartMore" class="cell-arrow-outer">
                            <view class="cell-arrow" :style="'transform: rotate(' + (isShowTemp ? (showTemp ? '135deg' : '45deg') : '45deg') + ');'"></view>
                        </view>
                    </view>
                </view>
                <view class="cell-content" :style="(border ? 'border-top:1px solid #EEEEEE;' : '') + ' ' + styles" v-if="showTemp" @tap="onBindTapContent">
                    <slot></slot>
                </view>
            </view>
        </view>
        <view class="cell-hidden" :style="'transform: translateX(' + translateX + 'px); ' + transform">
            <slot name="action"></slot>
            <view v-if="action" class="cell-action cell-del" @tap.stop.prevent="onCatchtapDelete">删除</view>
        </view>
    </view>
</template>

<script>
// pages/touch/touch.js
export default {
    data() {
        return {
            startX: 0,
            //开始坐标
            startY: 0,
            transform: '',
            txtStyle: '',
            delBtnWidth: 60,
            hasTap: true,// 解决touchend和bindtap之间的冲突
			
			showTemp:true,
			isShowTemp:true,
			stopPropagationTemp:true,
			isTouchMoveTemp:true
        };
    },
    options: {
        multipleSlots: true,
        // 在组件定义时的选项中启用多slot支持
        styleIsolation: 'apply-shared' // 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
    },
	watch: {
	    show: {
	        handler (newValue, oldValue) {
	            console.log(newValue)
				this.showTemp = newValue
	        },
	        immediate: true
	    }
	},
    /**
     * 组件的属性列表
     */
    props: {
        fontSize: {
            type: Number,
            default: 16
        },
        // 字体颜色
        titleColor: {
            type: String,
            default: '#000'
        },
        // 自定义内联样式
        styles: {
            type: String,
            default: ''
        },
        // 是否显示标题和内容之间的分隔线
        border: {
            type: Boolean,
            default: false
        },
        // 自定义图标
        customPrefix:{
        	type:String,
        	default:'iconfont'
        },
        // 图标图像
        icon: {
            type: String,
            default: ''
        },
        // 图标尺寸
        size:{
        	type:Number,
        	default:24
        },
        // 图标或图片颜色
        color: {
            type: String,
            default: ''
        },
		// 圆角图标
		radius:{
			type:Boolean,
			default:false
		},
        // 标题（名称）
        title: {
            type: String,
            default: ''
        },
        // 小标题（名称）
        subTitle: {
            type: String,
            default: ''
        },
        // 提示（说明）
        tips: {
            type: String,
            default: ''
        },
        // 箭头
        more: {
            type: Boolean,
            default: true
        },
        // 操作
        action: {
            type: Boolean,
            default: true
        },
        // 跳转
        to: {
            type: String,
            default: ''
        },
        // 禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 选中
        actived: {
            type: Boolean,
            default: false
        },
        // 显示隐藏内容
        show: {
            type: Boolean,
            default: true
        },
        isShow: {
            type: Boolean,
            default: true
        },
        // 是否显示滑动后的状态
        isTouchMove: {
            type: Boolean,
            default: false
        },
        // touch事件是否可用
        isTouch: {
            type: Boolean,
            default: true
        },
        // tap事件是否可用
        isTap: {
            type: Boolean,
            default: true
        },
        // 隐藏区域的宽度
        translateX: {
            type: Number,
            default: 80
        },
        // 阻止冒泡（主要是阻止content区域的冒泡行为）
        stopPropagation: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        onBindtapMore() {
			this.showTemp = !this.showTemp
        },

        //手指触摸动作开始 记录起点X坐标
        touchstart: function (e) {
            // 禁用时
            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTouch) {
                return;
            }

      
            //只操作为true的
            // console.log(this.isTouchMove);

            if (this.isTouchMoveTemp) {
                this.isTouchMoveTemp = false;
            }

            this.startX = e.changedTouches[0].clientX,
            this.startY = e.changedTouches[0].clientY,
            this.transform = `transform: translateX(${this.translateX}px)`
			
        },
        //滑动事件处理
        touchmove: function (e) {
            // 禁用时
            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTouch) {
                return;
            } // console.log('touchmove:', e);

            var that = this;
            var index = e.currentTarget.dataset.index;
            var //当前索引
                startX = that.startX;
            var //开始X坐标
                startY = that.startY;
            var //开始Y坐标
                touchMoveX = e.changedTouches[0].clientX;
            var //滑动变化坐标
                touchMoveY = e.changedTouches[0].clientY;
            var //滑动变化坐标
                //获取滑动角度
                angle = that.angle(
                    {
                        X: startX,
                        Y: startY
                    },
                    {
                        X: touchMoveX,
                        Y: touchMoveY
                    }
                );
            let isTouchMove = false; //滑动超过30度角 return

            if (Math.abs(angle) > 30) {
                return;
            }

            if (touchMoveX > startX) {
                //右滑
                isTouchMove = false;
            } else {
                //左滑
                isTouchMove = true;
            } //更新数据

			this.isTouchMoveTemp = isTouchMove,
			this.hasTap = false
        },
        // 滑动结束
        touchE: function (e) {
            // 禁用时
            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTouch) {
                return;
            } // console.log('touchend:', e);

            var that = this;

            if (e.changedTouches.length == 1) {
                //手指移动结束后触摸点位置的X坐标
                var endX = e.changedTouches[0].clientX; //触摸开始与结束，手指移动的距离

                var disX = that.startX - endX;
                var delBtnWidth = that.delBtnWidth; //如果距离小于删除按钮的1/2，不显示删除按钮

                var transform = disX > delBtnWidth / 2 ? 'transform: translateX(0px)' : `transform: translateX(${this.translateX}px)`;
                var txtStyle = disX > delBtnWidth / 2 ? 'left:-' + delBtnWidth + 'rpx' : 'left:0rpx'; //获取手指触摸的是哪一项

                var index = e.currentTarget.dataset.index;
                this.transform = transform;
                this.txtStyle = txtStyle; //更新列表的状态
                return;
            }
        },

        /**
         * 计算滑动角度
         * @param {Object} start 起点坐标
         * @param {Object} end 终点坐标
         */
        angle: function (start, end) {
            var _X = end.X - start.X;

            var _Y = end.Y - start.Y; //返回角度 /Math.atan()返回数字的反正切值

            return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
        },

        // header跳转或操作
        onBindTapHeader(ev) {
            // 禁用时
            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTap) {
                return;
            } // console.log('onBindTap:', ev);

            if (this.hasTap) {
                // 有to且不为空的情况下，做跳转处理
                if (this.to !== '') {
                    uni.navigateTo({
                        url: this.to
                    });
                } // 否则自定义事件处理
                else {
                    this.$emit('jfheadertap',ev);
                }
            } else {
                this.hasTap = true
            }
        },
		
		touchstartMore(){
			// 禁用时
			if (this.disabled) {
			    return;
			}
			
			if(this.isShowTemp){
				this.onBindtapMore()
			}
		},

        // content操作
        onBindTapContent(ev) {
			// 阻止冒泡（点击子元素事件不触发父元素事件）
			if(this.stopPropagationTemp){
				return
			}
            // 禁用时
            if (this.disabled) {
                return;
            } // 不可滑动时

            if (!this.isTap) {
                return;
            }

            this.$emit('jfcontenttap', {
                detail: ev
            });
        },

        // 删除
        onCatchtapDelete(ev) {
            // console.log(ev);
            this.transform = `transform: translateX(${this.translateX}px)`
			
            this.$emit('jfdelete', {
                detail: ev
            });
        },

        // 关闭隐藏按钮
        onBindHide() {
            this.transform = `transform: translateX(${this.translateX}px)`
        }
    },
    beforeMount: function () {
        // 在组件实例进入页面节点树时执行
		this.showTemp = this.show
		this.isShowTemp = this.isShow
		this.stopPropagationTemp = this.stopPropagation
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    onPageShow: function () {
        // 页面被展示
    },
    onPageHide: function () {
        // 页面被隐藏
        this.transform = `transform: translateX(${this.translateX}px)`,
        this.isTouchMoveTemp = false
    },
    onPageResize: function (size) {
        // 页面尺寸变化
    }
};
</script>
<style>
.cell {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 1px;
}

/* .cell:link {
    background-color: #ffffff;
}

.cell:visited {
    background-color: #ffffff;
}

.cell:hover {
    background-color: #ffffff;
}

.cell:active {
    background-color: #eeeeee;
} */

.cell-body {
    width: 100%;
    margin-right: 0;
    transition: all 0.4s;
}

.cell-touch {
    display: flex;
    flex-direction: column;
}
.cell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding:20rpx; */
}

.cell-header:link {
    background-color: #ffffff;
}

.cell-header:visited {
    background-color: #ffffff;
}

.cell-header:hover {
    background-color: #ffffff;
}

.cell-header:active {
    background-color: #eeeeee;
}

.cell-left {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.cell-right {
    display: flex;
    justify-content: left;
    flex-direction: row;
    align-items: center;
}

.cell-icon {
    
}
.cell-image {
    display: block;
    width: 72rpx;
    height: 72rpx;
	margin-left: 20rpx;
}
.cell-headline {
    text-align: left;
    padding: 20rpx;
    min-height: 44rpx;
}
.cell-title {
    font-size: 30rpx;
	max-width: 50vw;
	overflow: hidden; 
	text-overflow:ellipsis;
	white-space: nowrap;
}

.cell-sub-title,
.cell-tips {
    font-size: 24rpx;
    color: #999999;
	max-width: 50vw;
	overflow: hidden; 
	text-overflow:ellipsis;
	white-space: nowrap;
}
.cell-arrow-outer {
    width: 22rpx;
    height: 44rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20rpx;
}
.cell-arrow {
    width: 10rpx;
    height: 10rpx;
    border-width: 2rpx;
    border-style: solid;
    border-color: #666666;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
}

.cell-content {
    /* padding:20rpx; */
}
/* .cell-content:link {
    background-color: #ffffff;
}

.cell-content:visited {
    background-color: #ffffff;
}

.cell-content:hover {
    background-color: #ffffff;
}

.cell-content:active {
    background-color: #eeeeee;
} */

.cell-hidden {
   /* display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; */
    color: #fff;
    /* transform: translateX(110px); */
    transition: all 0.4s;
	width: 80rpx;
}

.cell-body,
.cell-hidden {
    transform: translateX(0);
}
.cell-action {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #666666;
    font-size: 26rpx;
    padding: 0 40rpx;
	width: 80rpx;
	margin-left: 1px;
}
.cell-del {
    background: #f4310a;
}

/* 禁用 */
.disabled {
    cursor: not-allowed;
    background: #fbfcfd;
}
.disabled:link,
.disabled:visited,
.disabled:hover,
.disabled:active {
    background-color: #fbfcfd;
}

.disabled .cell-title {
    color: #999999;
}
.disabled .cell-sub-title,
.disabled .cell-tips {
    color: #cccccc;
}
.disabled .cell-arrow {
    border-color: #cccccc;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* 选中 */
.actived {
    /* background: #f0faff; */
}
.actived:link,
.actived:visited,
.actived:hover,
.actived:active {
    /* background-color: #e5eef3; */
}

.actived .cell-title {
    color: mediumblue;
}
.actived .cell-sub-title,
.actived .cell-tips {
    color: #89bbf0;
}
.actived .cell-arrow {
    border-color: #89bbf0;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
</style>
